<template>
  <div class="mui-numbox"
       data-numbox-min='1'>
    <button class="mui-btn mui-btn-numbox-minus"
            type="button">-</button>
    <input id="test"
           class="mui-input-numbox"
           type="number"
           value="1"
           @change="countChange"
           ref="numbox" />
    <button class="mui-btn mui-btn-numbox-plus"
            type="button">+</button>
  </div>
</template>
<script>
import mui from '../../mui/js/mui.min.js'

export default {
  methods: {
    // 当输入框的值被改变时就触发，通过this.$emit（）方法向父组件传递输入框的值
    countChange () {
      // console.log(this.$refs.numbox.value)
      this.$emit('getCount', parseInt(this.$refs.numbox.value))
    }
  },
  mounted () {
    mui('.mui-numbox').numbox() // 初始化数字选择框
    // mui('.mui-numbox').numbox().setOption('step', 1)
  },
  props: ['max'], // 通过props传递
  watch: {
    // 监听库存的数量，设置输入框的最大值
    'max': function (newVal) {
      mui('.mui-numbox').numbox().setOption('max', newVal)
    }

  }
}
</script>
<style lang="less" scoped>
</style>
